<%@page import="classes.LifebookUserSearchParameters"%>
<%@page import="classes.LifebookImage"%>
<%@page import="classes.DB"%>
<%@page import="classes.LifebookUser"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>

    <body style ="background-image:url('bg.png')">

        <%
            LifebookUser user = (LifebookUser) session.getAttribute("user");
            if (user == null) {
                response.sendRedirect("index.jsp");
            } else {
                DB.cleanTempUploadsByUser(user.getUsername(), -1);
            }
        %>
        <!-- navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <a class="brand" href="#"><b class ="life">Life</b><b class = "book">Book</b></a>
                <ul class="nav">
                    <li><a href ="browse.jsp"><span class ="navbarText"><i class = "icon-home icon-white"></i> Home</span></a></li>
                    <li class ="active"><a href ="users.jsp"><span class ="navbarText"><i class = "icon-user icon-white"></i> Users</span></a></li>
                    <li><a href ="users/<%=user.getUsername()%>"><span class ="navbarText"><i class = "icon-list-alt icon-white"></i> Profile</span></a></li>
                </ul>
                <button class="btn pull-right btn-success" onClick ="location.href = 'LogoutServlet';">Logout</button>
                <a href="#advanceSearchModal" role="button" class="btn pull-right btn-success" data-toggle="modal"><i class = "icon-zoom-in icon-white"></i></a>
                <form class="navbar-search pull-right" action ="BrowseUserSimpleSearchServlet">
                    <input name ="userSearch" type="text" class="search-query input-xlarge" placeholder="Username">
                </form>
            </div>
        </div>

        <div class = "container">

            <div class = "container">
                <ul class="breadcrumb">
                    <li><b>Welcome <%=user.getUsername()%>!</b><span class="divider">/</span></li>
                    <li><a href="users.jsp">All Users</a> <span class="divider">/</span></li>
                    <li><a href="ChangeUserBrowseTypeServlet?browseType=1">Followed Users</a> <span class="divider">/</span></li>
                    <li><a href="ChangeUserBrowseTypeServlet?browseType=2">Suggested Users</a> <span class="divider">/</span></li>
                </ul>

                <div id = "myMasonryContainer" class="masonry js-masonry offset">

                    <%
                        LifebookUserSearchParameters userSearch = (LifebookUserSearchParameters) session.getAttribute("userSearchParameters");
                        for (LifebookUser lu : DB.searchLifebookUsers(userSearch)) {
                    %>

                    <!--Image Thumbnail-->
                    <div style ="
                         width:260px; 
                         height: 220px;">
                        <center>
                            <div style =
                                 "width:240px; 
                                 height: 200px;
                                 background-color:white;
                                 border:1px solid #DADADA;
                                 position: relative;
                                 top: 10px;"  
                                 onclick="openUserModal('<%=lu.getUsername()%>');">
                                <center>
                                    <img style =
                                         "
                                         max-height: 170px;
                                         max-width: 220px;
                                         position: relative;
                                         top: 10px;
                                         border:1px solid #E9E9E9;"
                                         src="userimages/<%=lu.getUsername()%>" 
                                         Title="<%=lu.getUsername()%>">
                                    <br/>
                                </center>
                            </div>
                        <b class ="imageUsername" style =
                           "position: relative;
                           bottom:12px;"><%=lu.getUsername()%></b>
                        </center>
                    </div>
                    <%
                            session.setAttribute("userSearchParameters", new LifebookUserSearchParameters());
                        }
                    %>
                </div>
            </div>

            <!--Modal for user-->
            <div id ="userModal" class = "modal hide fade">
                <div class ="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <center>
                        <a id ="userModalProfileLink" href = "#"><h1 id = "userModalUsername" >Username</h1></a>
                    </center>
                </div>
                <div id ="userBody" class="modal-body">
                    <center>
                        <img id ="userModalImage" width ="300" src ="noProfileImage.png" class = "thumbnail">
                        <h5 class ='well' id ="userModalAboutMe">This is my Description</h5>
                    </center>
                </div>
                <div id ="userFooter" class="modal-footer">
                    <center>
                        <button onClick="followUser();" id ="followUserButton" class="btn btn-danger"><i id ="userLikeIcon" class="icon-white icon-heart"></i> <span id="isFollowingUserSpan"></span></button>
                        <button class = "btn btn-inverse" data-dismiss="modal" aria-hidden="true">Close</button>
                    </center>
                </div>
            </div>

            <!-- Advance Search -->
            <div height ="100%" id="advanceSearchModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <center>
                        <h1>Advance Search</h1>
                    </center>
                </div>
                <form action ="BrowseUserAdvanceSearchServlet">
                    <div class="modal-body search">
                        <center>
                            <h4>Username:</h4>
                            <input name ="username" type ="text">
                            <h4>Get Results From:</h4>
                            <select name ="followMode">
                                <option>All users</option>
                                <option>Users you follow</option>
                                <option>Users you don't follow</option>
                                <option>Users who follow you</option>
                            </select>
                        </center>
                        <input type="hidden" name="currentUsername" value="<%=user.getUsername()%>">
                    </div>
                    <div class="modal-footer">
                        <center>
                            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                            <button type ="submit" class="btn btn-primary"><i class = "icon-zoom-in icon-white"></i>Search</button>
                        </center>
                    </div>
                </form>
            </div>

            <!-- Open User Modal -->
            <script>
                    var currentViewedUser;
                    function openUserModal(username) {
                        $.ajax({
                            type: 'POST',
                            url: '/LifeBook/GetUserFromUsernameServlet',
                            data: {
                                username: username
                            },
                            success: function(msg) {
                                var user = eval("(" + msg + ")");
                                $("#userModalProfileLink").attr("href", "users/" + user.username);
                                $("#userModalImage").attr("src", "userimages/" + user.username);
                                $("#userModalUsername").html(user.username);
                                $("#userModalAboutMe").html(user.aboutme);
                                currentViewedUser = user.username;

                                if ('<%=user.getUsername()%>' === user.username)
                                    $('#followUserButton').hide();
                                else
                                    $('#followUserButton').show();

                                if (user.userIsLikedByCurrentUser) {
                                    $('#isFollowingUserSpan').html("(" + user.followerCount + ") Following");
                                    $('#userLikeIcon').addClass("icon-white");
                                    $('#followUserButton').addClass("btn-danger");
                                    $('#followUserButton').addClass("active");
                                } else {
                                    $('#isFollowingUserSpan').html("(" + user.followerCount + ") Follow");
                                    $('#userLikeIcon').removeClass("icon-white");
                                    $('#followUserButton').removeClass("btn-danger");
                                    $('#followUserButton').removeClass("active");
                                }
                            }
                        });

                        $('#userModal').modal('show');
                    }
            </script>

            <!-- User follows another user -->
            <script>
                function followUser() {
                    $.ajax({
                        type: 'POST',
                        url: '/LifeBook/FollowUserServlet',
                        data: {
                            user: currentViewedUser,
                            currentUser: '<%=user.getUsername()%>'
                        },
                        success: function(msg) {
                            var user = eval("(" + msg + ")");
                            if (user.userIsLikedByCurrentUser) {
                                $('#isFollowingUserSpan').html("(" + user.followerCount + ") Following");
                                $('#userLikeIcon').addClass("icon-white");
                                $('#followUserButton').addClass("btn-danger");
                                $('#followUserButton').addClass("active");
                            } else {
                                $('#isFollowingUserSpan').html("(" + user.followerCount + ") Follow");
                                $('#userLikeIcon').removeClass("icon-white");
                                $('#followUserButton').removeClass("btn-danger");
                                $('#followUserButton').removeClass("active");
                            }
                        }
                    });
                }
            </script>
            <script src="js/jquery.js"></script>
            <script src="bootstrap/js/bootstrap.js"></script>
            <script src="js/masonry.pkgd.min.js"></script>
            <script src="js/imagesloaded.pkgd.js"></script>

            <script>
                var container = document.querySelector('.masonry');
                var msnry;
                // initialize Masonry after all images have loaded
                imagesLoaded(container, function() {
                    msnry = new Masonry(container);
                });
            </script>
    </body>
</html>
